<template>
  <div class="father">
    <div class="card">
      <el-row :gutter="20" type="flex">
        <el-col :span="12">
          <el-card shadow="never" style="height: 100%">
            <div class="card-header">
              <span>用户输入</span>
            </div>
            <!-- 项目基本信息 -->
            <div class="mod">
              <div class="form-head">
                <span>项目基本信息</span>
                <el-button class="btn">提交</el-button>
              </div>
              <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-row>
                  <el-col :span="10">
                    <div class="inputform">
                      <div>项目名称</div>
                      <input placeholder="请输入" />
                    </div>
                  </el-col>
                  <el-col :span="14">
                    <div class="icon">
                      <span>图片上传</span>
                      <div>
                        <el-upload
                          :auto-upload="false"
                          action="https://jsonplaceholder.typicode.com/posts/"
                          class="upload-demo"
                          multiple
                        >
                          <div class="iconfont icon-yunshangchuan_o">上传</div>
                        </el-upload>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <div class="inputform">
                      <div>项目地址</div>
                      <input placeholder="请输入" />
                    </div>
                  </el-col>
                  <el-col :span="14">
                    <div class="inputform">
                      <div style="margin-left: 100px">竣工日期</div>
                      <input placeholder="请输入" />
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <div class="inputform">
                      <div>建筑面积</div>
                      <input placeholder="请输入" />
                    </div>
                  </el-col>
                  <el-col :span="14">
                    <el-row>
                      <el-col :span="10">
                        <div class="inputformbr">
                          <div>其中，地上</div>
                          <input placeholder="请输入" />
                        </div>
                      </el-col>
                      <el-col :span="7">
                        <div class="inputformbr">
                          <div style="padding-left: 10px">地下</div>
                          <input placeholder="请输入" style="width: 65px" />
                        </div>
                      </el-col>
                      <el-col :span="7"></el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="10">
                        <div class="inputformbr">
                          <div>其中，办公</div>
                          <input placeholder="请输入" />
                        </div>
                      </el-col>
                      <el-col :span="7">
                        <div class="inputformbr">
                          <div style="padding-left: 10px">商场</div>
                          <input placeholder="请输入" style="width: 65px" />
                        </div>
                      </el-col>
                      <el-col :span="7">
                        <div class="inputformbr">
                          <div style="padding-left: 10px">公寓</div>
                          <input placeholder="请输入" style="width: 65px" />
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="10" class="car">
                        <div class="inputformbr">
                          <div>车库</div>
                          <input placeholder="请输入" />
                        </div>
                      </el-col>
                      <el-col :span="7">
                        <div class="inputformbr">
                          <div style="padding-left: 10px">酒店</div>
                          <input placeholder="请输入" style="width: 65px" />
                        </div>
                      </el-col>
                      <el-col :span="7">
                        <div class="inputformbr">
                          <span style="padding-left: 10px; font-size: 14px"
                            >(</span
                          >
                          <div>星级</div>
                          <input placeholder="请输入" style="width: 55px" />
                          <span style="font-size: 14px">)</span>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <div class="crux">
                  <span style="font-size: 14px">关键文件上传</span>
                  <div style="margin-left: 150px">
                    <el-upload
                      :auto-upload="false"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      class="upload-demo"
                      multiple
                    >
                      <div class="iconfont icon-yunshangchuan_o">上传</div>
                    </el-upload>
                  </div>
                </div>
                <el-form-item class="textareas">
                  <div class="inputs">
                    <span class="iconfont icon-shanchu"></span>
                    <el-input v-model="form.desc" type="textarea" />
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <!-- 能源费率 -->
            <div class="mod">
              <div class="form-head">
                <span>能源费率</span>
                <el-button class="btn">提交</el-button>
              </div>
              <el-form :inline="true" :model="energy">
                <!-- 夏季电价 -->
                <div class="energy">
                  <div class="energy_form">
                    <p>夏季</p>
                    <div>
                      <el-form-item class="date" label="日期">
                        <el-date-picker
                          v-model="energy.sumdate"
                          end-placeholder="结束日期"
                          range-separator="至"
                          start-placeholder="开始日期"
                          type="daterange"
                        />
                      </el-form-item>
                    </div>
                    <div class="summer">
                      <el-row>
                        <el-col :span="16">
                          <div class="rmb">
                            <div>电价RMB/kWh</div>
                            <div>
                              <input placeholder="请输入" style="width: 55px" />
                              <span>(峰)</span>
                            </div>
                            <div>
                              <input placeholder="请输入" style="width: 55px" />
                              <span>(平)</span>
                            </div>
                            <div>
                              <input placeholder="请输入" style="width: 55px" />
                              <span>(谷)</span>
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="8">
                          <div class="color">
                            <div class="fpg">
                              <div
                                style="
                                  width: 12px;
                                  height: 12px;
                                  background: #f79646;
                                "
                              ></div>
                              <div>峰</div>
                            </div>
                            <div class="fpg">
                              <div
                                style="
                                  width: 12px;
                                  height: 12px;
                                  background: #0070c0;
                                "
                              ></div>
                              <div>平</div>
                            </div>
                            <div class="fpg">
                              <div
                                style="
                                  width: 12px;
                                  height: 12px;
                                  background: #d6ebfa;
                                "
                              ></div>
                              <div>谷</div>
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <div class="day">
                        <div v-for="i in 24" :key="i" class="hour">{{ i }}</div>
                        <div class="shi">时</div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 非夏季电价 -->
                <div class="energy">
                  <el-form :inline="true" :model="energy" class="energy_form">
                    <p>非夏季</p>
                    <div>
                      <el-form-item class="date" label="日期">
                        <el-date-picker
                          v-model="energy.sumdate"
                          end-placeholder="结束日期"
                          range-separator="至"
                          start-placeholder="开始日期"
                          type="daterange"
                        />
                      </el-form-item>
                    </div>
                    <div class="summer">
                      <el-row>
                        <el-col :span="16">
                          <div class="rmb">
                            <div>电价RMB/kWh</div>
                            <div>
                              <input placeholder="请输入" style="width: 55px" />
                              <span>(峰)</span>
                            </div>
                            <div>
                              <input placeholder="请输入" style="width: 55px" />
                              <span>(平)</span>
                            </div>
                            <div>
                              <input placeholder="请输入" style="width: 55px" />
                              <span>(谷)</span>
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="8">
                          <div class="color">
                            <div class="fpg">
                              <div
                                style="
                                  width: 12px;
                                  height: 12px;
                                  background: #f79646;
                                "
                              ></div>
                              <div>峰</div>
                            </div>
                            <div class="fpg">
                              <div
                                style="
                                  width: 12px;
                                  height: 12px;
                                  background: #0070c0;
                                "
                              ></div>
                              <div>平</div>
                            </div>
                            <div class="fpg">
                              <div
                                style="
                                  width: 12px;
                                  height: 12px;
                                  background: #d6ebfa;
                                "
                              ></div>
                              <div>谷</div>
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <div class="day">
                        <div v-for="i in 24" :key="i" class="hour">{{ i }}</div>
                        <div class="shi">时</div>
                      </div>
                    </div>
                  </el-form>
                </div>
                <div>
                  <el-row>
                    <el-col :span="9">
                      <div class="inputformbr">
                        <div>电价RMB/kWh(去年平均)</div>
                        <input placeholder="请输入" />
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="inputformbr">
                        <div>天然气RMB/m³</div>
                        <input placeholder="请输入" style="width: 60px" />
                      </div>
                    </el-col>
                    <el-col :span="9">
                      <div class="inputformbr">
                        <div>市政热源单价RMB/kWh</div>
                        <input placeholder="请输入" />
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-form>
            </div>
            <!-- 入住率 -->
            <div class="mod">
              <div class="form-head">
                <span>入住率</span>
                <el-button class="btn">提交</el-button>
              </div>
              <el-form-item label="2021年（月份）">
                <ProjectForm :tableData="tableData"></ProjectForm>
              </el-form-item>
              <el-form-item label="2022年（月份）">
                <ProjectForm :tableData="tableData"></ProjectForm>
              </el-form-item>
            </div>
            <!-- 维修量 -->
            <div class="mod">
              <div class="form-head">
                <span>维修量（仅冷热站，单位：次）</span>
                <el-button class="btn">提交</el-button>
              </div>
              <el-form-item label="2021年（月份）">
                <ProjectForm :tableData="tableData"></ProjectForm>
              </el-form-item>
              <el-form-item label="2022年（月份）">
                <ProjectForm :tableData="tableData"></ProjectForm>
              </el-form-item>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never" style="height: 100%">
            <div class="card-white">
            </div>
            <!-- 项目需求 -->
            <div class="mod" style="padding-bottom: 24px">
              <div class="form-head">
                <span>项目需求</span>
              </div>
              <el-table
                :data="project"
                :header-cell-style="{ color: '#333' }"
                border
                style="width: 100%,margin-bottom: 20px"
              >
                <el-table-column label="序号" prop="id" width="60" />
                <el-table-column label="时间" prop="time" width="120" />
                <el-table-column label="需求内容" prop="need" width="260" />
                <el-table-column label="签名" prop="signname" />
                <el-table-column label="级别" prop="level" />
                <el-table-column label="确认" prop="confirm">
                  <el-button :icon="ArrowRight" circle style="color:#F79646;background:#EAF2FA;border:#EAF2FA" />
                </el-table-column>
              </el-table>
            </div>
            <!-- 相关人员联系方式 -->
            <div class="mod" style="padding-bottom: 24px">
              <div class="form-head">
                <span>相关人员联系方式</span>
                <el-button class="btn">提交</el-button>
              </div>
              <el-table
                :data="personnel"
                :header-cell-style="{ color: '#333' }"
                border
                style="width: 100%"
              >
                <el-table-column label="序号" prop="id" width="60" />
                <el-table-column label="姓名" prop="name" />
                <el-table-column label="职位" prop="position" />
                <el-table-column label="工作职责" prop="duty" />
                <el-table-column label="手机" prop="phone" width="120" />
                <el-table-column label="电邮" prop="email" />
                <el-table-column label="倒班情况" prop="shift" />
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { reactive } from "vue";
import ProjectForm from "./projectForm.vue";

let tableData = reactive([
  {
    one: "1",
    two: "1",
    three: "1",
    four: "1",
    five: "1",
    six: "1",
    seven: "1",
    eight: "1",
    nine: "1",
    ten: "1",
    eleven: "1",
    twelve: "1",
  },
]);

// 项目基本信息
const form = reactive({
  name: "",
  address: "",
  endtime: "",
  area: "",
  landup: "",
  landdown: "",
  work: "",
  shopping: "",
  apartment: "",
  garage: "",
  hotel: "",
  star: "",
  desc: "",
});

// 能源费率
const energy = reactive({
  sumdate: "",
  feng: "",
  ping: "",
  gu: "",
  electricityPrice: "",
  gas: "",
  govhot: "",
});

// 项目需求
const project = reactive([
  {
    id: "1",
    time: "2020-01-01",
    need: "项目需求1",
    signname: "张三",
    level: "一级",
    confirm: "",
  },
]);

// 联系方式
const personnel = reactive([
  {
    id: "1",
    name: "张三",
    position: "职位1",
    duty: "工作职责1",
    phone: "13888888888",
    email: "22222",
    shift: "倒班情况1",
  },
]);
</script>

<style lang="less" scoped>
.father {
  display: flex;
  justify-content: center;
  align-items: center;

  .card {
    width: 100%;
    background-color: #eaf2fa;

    .card-header {
      padding: 10px 24px;
      font-size: 20px;
      font-weight: 600;
      color: #4d62a5;
      border-bottom: 1px solid #eaedf5;
      span{
        letter-spacing:2px;
      }
    }
    .card-white{
      padding: 26px;
    }
  }
}

.inputform {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0;
  div {
    font-size: 14px;
  }
  input {
    width: 200px;
    height: 24px;
    border: 1px solid #d8d8d8;
    padding: 1px 3px;
    border-radius: 4px;
    margin: 0 5px;
  }
}

.inputformbr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0;
  div {
    font-size: 14px;
  }
  input {
    width: 80px;
    height: 24px;
    border: 1px solid #d8d8d8;
    padding: 1px 3px;
    border-radius: 4px;
    margin: 0 5px;
  }
}

/deep/ .el-card__body {
  padding: 20px 0;
}

.mod {
  border-bottom: 1px solid #eaedf5;
  margin: 0 24px;

  .el-table {
    :deep(.el-table__header) {
      width: 100% !important;

      thead th {
        text-align: center;
      }
    }

    :deep(.el-table__body) {
      width: 100% !important;

      tbody td {
        text-align: center;
      }
    }
  }
}

.textareas {
  width: 100%;

  div,
  textarea {
    width: 100%;
  }
}

.form-head {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  margin: 15px 0;

  span {
    font-size: 16px;
    font-weight: 600;
    color: #7f7f7f;
  }

  .btn {
    width: 104px;
    height: 30px;
    color: #fff;
    margin-left: 10px;
    background-color: #b4c7e7;
  }

  .area {
    display: flex;
  }
}

.icon {
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    margin-left: 100px;
    font-size: 14px;
  }
}

.car {
  padding-left: 42px;
}

.crux {
  display: flex;
}

.el-upload {
  div {
    font-size: 15px;
    color: #4d62a5;
    display: flex;
  }

  .icon-yunshangchuan_o:before {
    font-size: 22px;
  }
}

.inputs {
  padding-top: 10px;
  position: relative;
  & > span {
    position: absolute;
    right: 5px;
    top: 10px;
    z-index: 99999;
    font-size: 22px;
    color: #4d62a5;
  }
  :deep(.el-textarea) {
    border: 1px solid #eaf2fa;

    textarea {
      resize: none;
      height: 100px;
      width: 100%;
    }
  }

  :deep(.el-textarea__inner)::-webkit-scrollbar {
    width: 5px;
    height: 20px;
    background: #eee;
  }

  :deep(.el-textarea__inner)::-webkit-scrollbar-thumb {
    background: #4d62a5;
    border-radius: 5px;
  }
}

.energy {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 16px;

  p {
    font-size: 14px;
    text-align: left;
    padding-bottom: 10px;
  }

  .energy_form {
    margin: 8px;

    .date {
      margin-left: 66px;

      :deep(.el-form-item__content) {
        width: 200px;
      }
    }
    .summer {
      .rmb {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        div {
          font-size: 14px;
        }
        input {
          width: 80px;
          height: 24px;
          border: 1px solid #d8d8d8;
          padding: 1px 3px;
          border-radius: 4px;
          margin: 0 5px;
        }
      }
    }
  }
}

.color {
  margin-bottom: 5px;
  display: flex;
  justify-content: flex-end;

  .fpg {
    margin-left: 25px;
    width: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.day {
  display: flex;
  justify-content: space-between;

  .hour {
    width: 20px;
    height: 20px;
    background: #0070c0;
    text-align: center;
    line-height: 20px;
  }

  .shi {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
  }
}
</style>
